import { Button, Col, Form, Input, Row, Select } from 'antd';
import { useTranslation } from 'react-i18next';
import { UserSearch } from '@/types/sys';
const SearchUser = forwardRef(
  (
    {
      onFinish,
      onAdd,
    }: {
      onFinish: (values: UserSearch) => void;
      onAdd: (value: boolean) => void;
    },
    ref,
  ) => {
    const { t } = useTranslation();
    const [form] = Form.useForm();
    const selectOptions = [
      { label: '管理员', value: '1' },
      { label: '普通用户', value: '2' },
    ];

    useImperativeHandle(ref, () => ({
      submit: () => form.submit(),
    }));
    return (
      <Row>
        <Form
          form={form}
          layout="inline"
          onFinish={onFinish}
          labelCol={{ span: 4 }}
          style={{
            width: '100%',
          }}
        >
          <Col span={6}>
            <Form.Item label="账号" name="accessor">
              <Input placeholder="请输入用户名" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="角色" name="role_id">
              <Select placeholder="请选择角色" mode="multiple" allowClear>
                {selectOptions.map((item) => (
                  <Select.Option key={item.value} value={item.value}>
                    {item.label}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          </Col>

          <Col span={6}>
            <Form.Item label="状态" name="status">
              <Select placeholder="请选择状态" allowClear>
                <Select.Option value="1">正常</Select.Option>
                <Select.Option value="0">禁用</Select.Option>
              </Select>
            </Form.Item>
          </Col>

          <Col span={6}>
            <Button type="primary" htmlType="submit">
              {t('common.search')}
            </Button>
            <Button
              style={{ marginLeft: 8 }}
              type="default"
              htmlType="button"
              onClick={() => form.resetFields()}
            >
              {t('common.reset')}
            </Button>
            <Button
              style={{ marginLeft: 8 }}
              type="default"
              htmlType="button"
              onClick={() => onAdd(true)}
            >
              {t('common.add')}
            </Button>
          </Col>
        </Form>
      </Row>
    );
  },
);

export default SearchUser;
